F12 Console的用法，以及Debug技巧
小课堂【武汉第148期】
分享人：冯强
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
一.背景介绍
什么是console？
Chrome 中 Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。在具备调试功能的浏览器上，window 对象中会注册一个名为 console 的成员变量，指代调试工具中的控制台，console 有很多方法，比如我们最常用的log()
二.知识剖析:常用console方法
1. console.log( )
普通输出方法，参数可以为任何对象。
常亮 console.log("常量");
变量 console.log(name);
表达式 console.log("名字：" + name);
方法 console.log(document.getElementsByTagName("code"));
2. console.table()
可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。
var obj = {
fun: {
name: 'foo',
age: '18'
},
bar: {
name: 'bar',
age: '19'
}
};
var arr = [
['fun', '18'],
['bar', '19']
];
console.log(obj);
console.table(obj);
console.log(arr);
console.table(arr);
3.console.count([label])
输出执行到该行的次数例如：
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
4.console.time(name)
计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。
console.time('计时器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');
5.console.profile([profileLabel])
这是个挺高大上的东西，可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及console.profile()方法我们可以很方便地监控运行性能。
例如下面这段代码：
function parent() {
for (var i = 0; i < 10000; i++) {
childA()
}
}
function childA(j) {
for (var i = 0; i < j; i++) {}
}
console.profile('性能分析');
parent();
console.profileEnd();
然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。
页面加载过程的性能优化是前端开发的一个重要部分，使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样，控制台会把运行过程录制下来。如图，工具栏上有录制和停止按钮。
6. 其他方法
. 清除控制台 clear()
. 将对象及子元素以目录树列出来 console.dir()
. 条件打印（断言）console.assert()
3.常见问题
常用调试方法
4.解决方案
1. 断点调试
断点调试是最基础的一个调试方法，在调试的过程中查看变量和函数的变化状态，这使得不可见的程序运行过程变得可视化。 断点调试都在source选项卡中进行，所以放在下面一起来讨论。
2. sources 选项卡
b. 这几个小图标前两个和调试时页面的两个按钮相同， 分别是暂停/开始和单步；往右边两个向上向下的箭头意思是进入函数，和（执行完）跳出函数；后面的一个是忽略所有断点运行，这样被避免更改完之后，点掉所有断点执行一遍在挨个加断点的尴尬。
5.编码实战
6.扩展思考
为什么不提倡用alert进行调试？
一方面，传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息，那个窗口着实不太美观，而且会遮挡部分页面内容，着实有些不太友好。
另一方面，alert的调试信息会中断代码，阻碍页面的继续渲染。这就意味着开发人员调试完成后，必须手动清除这些调试代码，实在有些麻烦。
另外，如果在循环中使用alert，光关闭弹出的窗口就够自己累的了，哈哈！
7.参考文献
参考一：你真的了解console吗
参考二：Chrome开发者工具不完全指南
参考三：CSDN中文IT网
8.更多讨论
大家在调试程序中有什么比较好的方法分享一下？
鸣谢
感谢大家观看
BY : 包鹏亮|冯强